<script setup>
import { ref, onMounted } from "vue";
import { queryAllApi as queryAllClazzApi } from "@/api/clazz.js";
import { queryStuApi } from "@/api/stu.js";

//性别列表数据
const genders = ref([{ name: '男', value: 1 }, { name: '女', value: 2 }]);
//学历列表数据
const degrees = ref([{ name: '初中', value: 1 }, { name: '高中', value: 2 }, { name: '大专', value: 3 }, { name: '本科', value: 4 }, { name: '硕士', value: 5 }, { name: '博士', value: 6 }])
//班级列表数据
const clazzs = ref([]);
//校园学员列表数据
const isColleges = ref([{ name: '是', value: 1 }, { name: '否', value: 2 }]);

//定义数据模型 - 列表展示
const stuList = ref([])

//查询全部的班级数据
const queryAllClazz = async () => {
  const result = await queryAllClazzApi();
  if (result.code) {
    clazzs.value = result.data;
  }
}

//钩子函数
onMounted(() => {
  search();
  queryAllClazz();
})

//分页配置
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const handleSizeChange = (val) => {
  search();
}
const handleCurrentChange = (val) => {
  search();
}

//搜索框
const searchStu = ref({
  name: '',
  degree: '',
  clazzId: '',
  page: '',
  pageSize: ''
})

//查询
const search = async () => {
  const result = await queryStuApi(searchStu.value.name,
    searchStu.value.degree,
    searchStu.value.clazzId,
    currentPage.value,
    pageSize.value);
  if (result.code) {
    stuList.value = result.data.rows;
    total.value = result.data.total;
  }
}

//清空
const clear = () => {
  searchStu.value = { name: '', degree: '', clazzId: '' };
  search();
}

//新增/修改表单
const students = ref({
  name: '',
  no: '',
  gender: '',
  phone: '',
  idCard: '',
  isCollege: '',
  address: '',
  degree: '',
  graduationDate: '',
  clazzId: ''
})

// 控制弹窗
const dialogVisible = ref(false)
const dialogTitle = ref()

//按钮add
const add = () => {
  dialogVisible.value = 'true';
  dialogTitle.value = '添加学员';
  //清空表单内容
  students.value = {
    name: '',
    no: '',
    gender: '',
    phone: '',
    idCard: '',
    isCollege: '',
    address: '',
    degree: '',
    graduationDate: '',
    clazzId: ''
  }
  //重置表单校验信息 resetFields()
  if (empFormRef.value) {
    empFormRef.value.resetFields()
  }

}

</script>

<template>
  <!-- 标题 -->
  <h1>学员管理</h1>
  <!-- 表单 -->
  <!-- {{ searchEmp }} -->
  <div id="condition">
    <el-form :inline="true" :model="searchStu" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="searchStu.name" placeholder="请输入员工姓名" />
      </el-form-item>
      <el-form-item label="最高学历">
        <el-select v-model="searchStu.degree" placeholder="请选择">
          <el-option v-for="degree in degrees" :label="degree.name" :value="degree.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属班级">
        <el-select v-model="searchStu.clazzId" placeholder="请选择">
          <el-option v-for="clazz in clazzs" :label="clazz.name" :value="clazz.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="info" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!-- 按钮 -->
  <div id="button">
    <el-button type="primary" @click="add">+ 新增员工</el-button>
    <el-button type="danger" @click="deleteByIds">- 批量删除</el-button>
  </div>

  <!-- 表格 -->
  <el-table :data="stuList" border style="width: 100%" @selection-change="handleSelectionChange"> <!-- 多选 -->
    <el-table-column type="selection" :selectable="selectable" width="55" align="center" />
    <el-table-column prop="name" label="姓名" width="100" align="center" />
    <el-table-column prop="no" label="学号" width="120" align="center" />
    <el-table-column prop="clazzName" label="班级" width="200" align="center" />
    <el-table-column prop="gender" label="性别" width="80" align="center">
      <template #default="scope">
        {{ scope.row.gender == 1 ? '男' : '女' }}
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="手机号" width="140" align="center" />
    <el-table-column prop="degree" label="最高学历" width="120" align="center">
      <template #default="scope">
        <span v-if="scope.row.degree == 1">初中</span>
        <span v-else-if="scope.row.degree == 2">高中</span>
        <span v-else-if="scope.row.degree == 3">大专</span>
        <span v-else-if="scope.row.degree == 4">本科</span>
        <span v-else-if="scope.row.degree == 5">硕士</span>
        <span v-else-if="scope.row.degree == 6">博士</span>
        <span v-else>其他</span>
      </template>
    </el-table-column>
    <el-table-column prop="violationCount" label="违纪次数" width="100" align="center" />
    <el-table-column prop="violationScore" label="违纪扣分" width="100" align="center" />
    <el-table-column prop="updateTime" label="最后操作时间" width="200" align="center" />
    <el-table-column prop="address" label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div id="paging">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

  <!-- 新增/修改员工的对话框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1000px">
    <el-form :model="students" :rules="rules" ref="empFormRef" label-width="100px">
      <!-- {{ employee }} -->
      <!-- 基本信息 -->
      <!-- 第一行 -->
      <el-row :gutter="80">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="students.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="学号" prop="no">
            <el-input v-model="students.no" placeholder="请输入学号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第二行 -->
      <el-row :gutter="80">
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="students.gender" placeholder="请选择" style="width: 100%;">
              <el-option v-for="gender in genders" :label="gender.name" :value="gender.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="students.phone" placeholder="请输入员工手机号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行 -->
      <el-row :gutter="80">
        <el-col :span="12">
          <el-form-item label="身份证号">
            <el-input v-model="students.idCard" placeholder="请输入身份证号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否院校学员">
            <el-select v-model="students.isCollege" placeholder="请选择" style="width: 100%;">
              <el-option v-for="isCollege in isColleges" :label="isCollege.name" :value="isCollege.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行 -->
      <el-row :gutter="80">
        <el-col :span="12">
          <el-form-item label="联系地址">
            <el-select v-model="students.address" placeholder="请输入联系地址" style="width: 100%;">
              <el-option v-for="dept in depts" :label="dept.name" :value="dept.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最高学历">
            <el-select v-model="students.degree" placeholder="请选择" style="width: 100%;">
              <el-option v-for="emp in emps" :label="emp.name" :value="emp.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第五行 -->
      <el-row :gutter="80">
        <el-col :span="12">
          <el-form-item label="毕业时间">
            <el-date-picker v-model="students.graduationDate" type="date" style="width: 100%;" placeholder="请选择毕业时间"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属班级">
            <el-select v-model="students.clazzId" placeholder="请选择" style="width: 100%;">
              <el-option v-for="emp in emps" :label="emp.name" :value="emp.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer" align="center">
        <el-button type="primary" @click="save" style="margin-right: 50px">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

#condition {
  margin: 20px 0px;
}

#button {
  margin-bottom: 20px;
}

#paging {
  margin: 20px 0px;
}

.avatar {
  height: 40px;
}

.avatar-uploader .avatar {
  width: 78px;
  height: 78px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  text-align: center;
  border-radius: 10px;
  /* 添加灰色的虚线边框 */
  border: 1px dashed var(--el-border-color);
}
</style>